import React,{useEffect,useState} from 'react';
import axios from 'axios'
import { useNavigate } from 'react-router-dom';
const Index = () => {
    const navigator = useNavigate()
    const [musics,setMusics] = useState([]);
    const fetchData=async ()=>{
        var res =  await axios.get("http://122.112.161.135:3000/top/playlist");
        setMusics(res.data.playlists);
    }
    const toggle=(id)=>{
        console.log(id);
        navigator(`/detail/${id}`)
    }
    useEffect(()=>{
      fetchData();
    },[])
    return (
        <div>
            {musics.map(item=>{
                return (<div onClick={()=>toggle(item.id)} key={item.id*Math.random()}>{item.name}</div>)
            })}
        </div>
    );
}
export default Index;